<template>
 <div class="middle">
     <div class="left">
             <ul >
                <li v-for="item in list " :key="item.id">
                   <p>{{item.title2}}</p>
                </li>
                <!-- <li>OPPO</li>
                <li>平板电脑</li>
                <li>智能穿戴</li>
                <li>热门推荐</li>
                <li>热门推荐</li>
                <li>热门推荐</li>
                <li>热门推荐</li>
                <li>热门推荐</li>
                <li>热门推荐</li> -->
             </ul>
        </div>
        <div class="right">
         <div v-for="item in list " :key="item.id">
             <h4>{{item.title}}</h4>
            <img :src="item.image" alt="">
            <p>￥{{item.price}}</p>
            </div>
             
           
        </div>
          </div>
</template>
<script setup>

import {onMounted,ref} from 'vue'

import request from '@/api/request'
const list = ref([])
onMounted(() => {
    request.get('/list').then(res=>{
        if(res.data.code==200)
        {
            console.log(res);
            
            list.value=res.data.data
        }
     })
})



</script>

<style lang="scss" scoped>

.middle{
    display: flex;
    justify-content: space-between;
    background: #efefef;
  .left{
     ul li{
        width: 100px;
        height: 50px;
       font-size: 14px;
        line-height: 50px;
        text-align: center;
     }
  }
  .right{
    margin-right: 100px;
    
  }
}
</style>